<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
        .box-head{
            background-color: aquamarine;
            height: 30px;
            text-align: center;
        }
        *{
            padding: 0;
            margin: 0;
        }
        .box-body{
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    
         <div class="box">
          <div class="box-head">个人信息</div>
          <div class="box-body">
              <from id="form" action="form.php" method="post">

              </from>
          </div>
         </div>
            
          <script>
             
       var shuju = [
              
       {
 	        tag: 'input',
 	        text: '姓名',
 	        attr: {
 	          type: 'text',
 	          name: 'user'
 	        }
 	      },
          
           {
            tag: 'input',
 	        text: '性别',
 	        attr: {
 	          type: 'radio',
              name: 'gender'
 	        }
        }

       ];
   
          function FormBuilder(shuju)
          {
            this.data = shuju;
           console.log(this.data)
          }

       FormBuilder.prototype = {
 
        constructor:FormBuilder,
        create: function()
        {
            var html = "";
                  for(var k in this.data)
                  {

                var item = {
                    tag: '',
 	                  text: '',
 	                  attr: {}
                }
                 //获取数据里面的某一个数据 
                for(var n in this.data[k])
                {
                    item[n] = this.data[k][n];
                }
                html+= builder.toHtml(item);
                  }
              return '<table>' + html + '</table>';
        },
        ff:function(){
          console.log("ddd")
        }

       };
        
        var builder = {

          attr: function(attr)
       {
        var html = '';    
       for(var k in attr)
       {
        html += k + '="' + attr[k] + '" ';       
        }
              return html;
       },


      toHtml: function(obj)
      {
        var html = this.attr(obj.attr);
 	      return '<tr><th>' + obj.text + '</th><td>' + html + '</td></tr>';
   
      }
             
    

        }   

       

              	//  window['FormBuilder'] = FormBuilder;
                document.getElementById("form").innerHTML = new FormBuilder(shuju).create();
            
          </script>           
</body>
</html>